<template>
  <div class="wrap">
     <h2>state</h2>
      <p>a:{{ a }}</p>
      <p>b:{{ b }}</p>
  </div>

  <div class="wrap">
     <h2>getters</h2>
      <p>doubleA:{{ doubleA }}</p>
      <p>doubleB:{{ doubleB }}</p>
      <p>doubleBoth:{{ doubleBoth }}</p>
  </div>

  <div class="wrap">
     <h2>actions(同步)</h2>
      <p>
        <button @click="addA">a++</button>
        <button @click="addAN(10)">a+n</button>
        <button  @click="addB">b++</button>
      </p>
      <p>
        <button @click="a++">a++</button>
        <button @click="a+=10">a+n</button>
        <button @click="b++">b++</button>
      </p>
  </div>

  <div class="wrap">
     <h2>actions(异步)</h2>
      <p>
        <button @click="addA_Async">a++</button>
        <button  @click="addB_Async">b++</button>
        <button  @click="addBoth_Async">a++,b++</button>
      </p>
  </div>
</template>

<script>
import { useCountStore } from "@/stores/counter";

// 辅助函数
// mapState()  映射state/getters   (state只读)
// mapWritableState()  映射state/getters   (state可读可改写)
// mapActions 映射actions
import {mapState,mapWritableState,mapActions} from  "pinia";

export default {
  data() {
    return {
      countStore: null,
    }
  },
  computed:{
    // a:function(){
    //   return useCountStore()["a"];
    // },
    // ...mapState(useCountStore, ["a","b","doubleA","doubleB","doubleBoth"])
    ...mapWritableState(useCountStore, ["a","b","doubleA","doubleB","doubleBoth"])
  },
  methods: {
    ...mapActions(useCountStore,["addA","addB","addAN","addA_Async","addB_Async","addBoth_Async"])
  },
  created () {
   
  }

}

</script>


<style scoped>
.wrap {
  padding: 10px;
  margin: 10px 0;
  border: 1px dashed #333;
}
</style>
